import React, { useState, memo, useEffect } from 'react';
import { Table, Button } from 'antd';
import styles from './index.less';

const TabelLoadMore = ({ dataSource = [], ...other }) => {
  const [list, setList] = useState([]);
  const [data, setData] = useState([]);

  const handleLoadMore = () => {
    const _list = list.splice(0, 4);

    setData([...data.concat(_list)]);
  };
  const haandleRetract = () => {
    const list = [...(dataSource || [])];
    const data = list.splice(0, 4);
    setList(list);
    setData(data);
  };

  useEffect(() => {
    const list = [...(dataSource || [])];
    const data = list.splice(0, 4);
    setList(list);
    setData(data);
  }, [JSON.stringify(dataSource)]);

  return (
    <Table
      size="small"
      dataSource={data}
      className={styles.tableBox}
      style={{ border: '1px solid #e8e8e8' }}
      pagination={false}
      // scroll={{ x: 555 }}
      {...other}
      // footer={
      //   list.length > 0
      //     ? () => (
      //         <div style={{ textAlign: 'center' }} onClick={handleLoadMore}>
      //           <Button type="link">查看更多</Button>
      //         </div>
      //       )
      //     : undefined
      // }
      footer={
        dataSource.length > 4
          ? () =>
              list.length > 0 ? (
                <div style={{ textAlign: 'center' }} onClick={handleLoadMore}>
                  <Button type="link">查看更多</Button>
                </div>
              ) : (
                <div style={{ textAlign: 'center' }} onClick={haandleRetract}>
                  <Button type="link">收起</Button>
                </div>
              )
          : undefined
      }
    />
  );
};

export default memo(TabelLoadMore);
